<template>
  <div class="box">
    <div class="mianbaoxie">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="position:fixed;top: 13%">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商城管理</el-breadcrumb-item>
        <el-breadcrumb-item>秒杀管理</el-breadcrumb-item>
        <el-breadcrumb-item>秒杀活动列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="content-box">
      <div class="search-box">
        <div class="input-box-title">
          <span><i class="el-icon-search"></i>筛选查询</span>
        </div>
        <div class="input-box">
          <div class="input-item">
            <div style="width:90%;">
              <el-input placeholder="活动编号" v-model="activityNumber">
                <template slot="append">
                  <el-button type="primary" plain @click="loadData">查询</el-button>
                </template>
              </el-input>
            </div>
          </div>
          <div class="input-item">
            <div style="width:100%;">
              <el-date-picker
                  v-model="activityTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
              <el-button @click="loadData">筛选</el-button>
              <el-button type="primary" style="margin-left: 25%" @click="addInit">添加秒杀活动</el-button>
            </div>

          </div>
        </div>
      </div>
      <div class="table-box">
        <el-table
            height="569"
            border
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="activityNumber"
              label="编号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="activityTitle"
              label="秒杀活动名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="itemNum"
              label="商品数量"
              width="180">
          </el-table-column>
          <el-table-column
              label="活动状态"
              width="180">
            <template slot-scope="s">
              <el-tag v-if="s.row.activityStatus == 0">未开始</el-tag>
              <el-tag type="success" v-if="s.row.activityStatus == 1">进行中</el-tag>
              <el-tag type="info" v-if="s.row.activityStatus == 2">已结束</el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="activityParticipants"
              label="参与人数"
              width="180">
          </el-table-column>
          <el-table-column
              label="活动时间">
            <template slot-scope="s">
              {{s.row.activityBtime}}-{{s.row.activityOtime}}
            </template>
          </el-table-column>
          <el-table-column
              label="是否下架"
              width="180">
            <template slot-scope="s">
              <el-switch
                  v-model="s.row.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope="s">
              <el-button type="primary" plain icon="el-icon-chat-dot-round" circle size="small"
                         @click="view(scope.row)"></el-button>
              <el-button type="primary" plain icon="el-icon-edit" circle size="small"
                         @click="updateinit(scope.row)"></el-button>
              <el-button type="danger" plain icon="el-icon-delete" circle size="small"
                         @click="delScene(scope.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog title="添加秒杀活动" :visible.sync="addSeckillVisible">
        <el-form :model="seckill">
          <el-form-item label="活动标题" :label-width="formLabelWidth">
            <el-input v-model="seckill.activityTitle" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="秒杀时间" :label-width="formLabelWidth">
            <el-date-picker
                v-model="seckill.addActivityTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd ">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="秒杀时段" :label-width="formLabelWidth">
            <el-time-picker
                is-range
                v-model="seckill.timeFrame"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="HH:mm:ss"
                placeholder="选择时间范围">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="是否上架" :label-width="formLabelWidth">
            <el-radio v-model="seckill.status" label="1">上架</el-radio>
            <el-radio v-model="seckill.status" label="0">下架</el-radio>
          </el-form-item>
        </el-form>
        <span>请选择要加入活动的商品</span>
        <el-table
            height="250"
            :data="itemTableData"
            style="width: 100%">
          <el-table-column
              prop="itemCode"
              label="编号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="itemName"
              label="商品名称"
              width="180">
          </el-table-column>
          <el-table-column
              label="品牌">
            <template slot-scope="s">
              <el-avatar shape="square" size="small" :src="s.row.url"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column
              label="分类">
            <template slot-scope="s">
             {{s.row.cate.name}}
            </template>
          </el-table-column>
          <el-table-column
              prop="itemSellingPrice"
              label="价格">
          </el-table-column>
          <el-table-column
              label="物流">
            <template slot-scope="s">
              {{s.row.itemLogisticsType1.logisticsType}}
            </template>
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope="s">
              <el-button type="primary" plain icon="el-icon-plus" circle size="small"
                         @click="addItemInSeckill(s.row.id)"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <span>以下是您已选择的商品</span>
        <el-table
            height="250"
            :data="goodsOfSeckill"
            style="width: 100%">
          <el-table-column
              prop="itemCode"
              label="商品编号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="scode"
              label="货品货号"
              width="180">
          </el-table-column>
          <el-table-column
              label="秒杀价格">
            <template slot-scope="s">
              <el-input v-model="goodsOfSeckill[s.$index].seckillPrice" placeholder="秒杀价格"></el-input>
            </template>
          </el-table-column>
          <el-table-column
              label="秒杀数量">
            <template slot-scope="s">
              <el-input v-model="goodsOfSeckill[s.$index].seckillNum" placeholder="秒杀数量"></el-input>
            </template>
          </el-table-column>
          <el-table-column
              label="剩余数量">
            <template slot-scope="s">
              {{s.row.itemRepertory.itemRepertoryNum}}
            </template>
          </el-table-column>
          <el-table-column
              label="价格">
            <template slot-scope="s">
              <span style="color: red">￥{{s.row.itemRepertory.itemPrice}}</span>
            </template>
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope="s">
              <el-button type="danger" plain icon="el-icon-delete" circle size="small"
                         @click="delItemInSeckill(s.$index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addSeckillVisible = false">取 消</el-button>
          <el-button type="primary" @click="logInfo()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData:null,
      activityNumber:"",
      activityTime:[],
      seckill:{
        addActivityTime:[],
        seckillGoods:[]
      },
      formLabelWidth: '120px',
      addSeckillVisible:false,
      itemTableData:null,
      goodsOfSeckill:[]
    }
  },
  methods: {
    loadData(){
      this.$axios({
        url:"/seckill/getAllSeckill",
        method:"get",
        params:{
          activityNumber:this.activityNumber,
          activityBtime:this.activityTime[0],
          activityOtime:this.activityTime[1]
        }
      }).then(res=>{
        this.tableData = res.data.data
      })
    },
    addInit(){
      this.getAllItem()
      this.addSeckillVisible = true
    },
    logInfo(){
      for (let i = 0; i < this.seckill.addActivityTime.length; i++) {
        this.seckill.addActivityTime[i] = this.seckill.addActivityTime[i]+ this.seckill.timeFrame[i]
      }
      for (let i = 0; i < this.goodsOfSeckill.length; i++) {
        this.seckill.seckillGoods.push({goodsId:this.goodsOfSeckill[i].id,seckillNum:this.goodsOfSeckill[i].seckillNum,seckillPrice:this.goodsOfSeckill[i].seckillPrice})
      }
      this.$axios({
        url:"seckill/addGoodsInSeckill",
        method:"post",
        data:this.seckill
      }).then(res=>{
        if (res.data.code) {
          this.addSeckillVisible = false
          this.loadData()
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
        }
      })
    },
    getAllItem() {//商品列表全查
      this.$axios({
        url: "item/getAllItem",
        method: "get",
      }).then(res => {
        this.itemTableData = res.data.data
      })
    },
    addItemInSeckill(itemId){
      this.$axios({
        url:'seckill/getAllGoodsByItemId',
        method:"get",
        params:{
          itemId:itemId
        }
      }).then(res=>{
        this.goodsOfSeckill.push(...res.data.data)
      })
    },
    delItemInSeckill(index){
      this.goodsOfSeckill.splice(index,1)
    }
  },
  created() {
    this.loadData()
  }
}
</script>

<style>
.box {
  width: 100%;
  height: 80vh;
}
.content-box {
  width: 95%;
  height: 70vh;
  background: #FFFFFF;
  box-shadow: 1px 4px 12px #000;
  margin: 0 auto;
  overflow: hidden;
}
.search-box {
  width: 95%;
  height: 8vh;
  margin: 0 auto;
  margin-top: 20px;
  border-bottom: 1px solid #ccc;
}
.input-box {
  height: 70%;
  width: 100%;
}
.input-box-title{
  width: 100%;
  height: 40%;
}
.input-item{
  width: 50%;
  height: 60%;
  float: left;
}
.table-box {
  width: 100%;
  height: 70vh;
}
</style>